{% extends 'xadmin/base.html' %}
{% load staticfiles %}
{% load node_tag %}
{% load permission_tag %}

{% block title %}
    角色管理
{% endblock %}

{% block style %}
    <style>
        #myTab {
            border-right: solid 1px #ddd;
        }
        #myTab .active {
            border-right: solid 2px #0000ff!important;
        }
        #myTab li{
            width:100%;
            border-left:none!important;
        }
        #myTab a{
            border: none;
            display: block;
            font-size:12px;
        }
        .myTab li:hover {border-right: solid 2px #0000ff!important;}
    </style>
{% endblock %}

{% block main %}

    <div class="col-sm-10">
        <form method="POST" class="layui-form" action="" style="margin:40px;" onsubmit="return before_submit()">
            {% csrf_token %}

            {% for field in group_form %}

                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 125px;">{{ field.label }}</label>
                        <div class="layui-input-block" style="margin-left:160px;">
                            {{ field }}
                            <span class="help-block m-b-none">{{ field.errors }}</span>
                        </div>
                    </div>

            {% endfor %}

            <div id="LAY_preview" style="margin-top:60px;">
                <input type="hidden" name="perjson" id="perjson">
                {% for ptype, pdic in permissions.items %}
                    <div style="padding: 20px;">
                      <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">
                          <div class="layui-card permissions">
                            <div class="layui-card-header premissiontype" ptype="{{ ptype }}">{{ ptype|show }}</div>
                            <div class="layui-card-body">
                              <div class="layui-input-block">
                                  {% for value, title in pdic.items %}
                                    <input type="checkbox" lay-skin="primary" title="{{ title }}" value="{{ value }}">
                                  {% endfor %}
                                </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                {% endfor %}
            </div>
            <div class="col-sm-4 col-sm-offset-2">
                <button class="btn btn-primary" type="submit">保存</button>
                <a class="btn btn-white" href="#" onclick="javascript:history.back(-1);">取消</a>
            </div>
        </form>
    </div>
{% endblock %}

{% block script %}
    <script src="{% static 'xadmin/ueditor/ueditor.config.js'%}"></script>
    <script src="{% static 'xadmin/ueditor/ueditor.all.js'%}"></script>
    <script>





      function before_submit(){
          var json = {};

          $('.permissions').each(function(){
              var sun_json = [];
              var permission_type = $(this).find('.premissiontype').attr('ptype');
              $(this).find('input').each(function(){
                  if($(this).get(0).checked){
                      sun_json.push($(this).val());
                  }
              });
              json[permission_type] = sun_json;
          });
          var flag = false;
          for(var key in json){
              if(json[key].length == 0){
                  delete json[key];
              }
              else{
                  flag = true;
              }
          }
          if(flag){
              json = JSON.stringify(json);
              $('#perjson').val(json);
              console.log(json);
              return true;
          }
          return false;
      }

      //编辑角色时初始化权限
      var perm_json = '{{ perm_json | safe }}';
      if(perm_json){
          perm_obj = JSON.parse(perm_json);
          for(var perm in perm_obj){
              var ptype = $('div[ptype="'+ perm +'"]');
              for(var t in perm_obj[perm]){
                  ptype.parent().find('input[value="'+ perm_obj[perm][t] +'"]').prop('checked', true);
                  ptype.parent().find('input[value="'+ perm_obj[perm][t] +'"]').next('.layui-form-checkbox').addClass('layui-form-checked');
              }
          }
      }


    </script>
{% endblock %}